<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					fontWeight: 'bold'
				}"
				@click="tabClick">
			</u-tabs>
			
			<view class="search" v-if="tabIndex != 0">
				<view class="search-item">
					<u-search placeholder="输入搜索内容"
						shape="square"
						v-model="searchValue"
						:showAction="false"
						@change="searchChange">
					</u-search>
				</view>
				<view class="add-button" @click="searchValue = ''">
					清空
				</view>
			</view>
		</u-sticky>
		
		<view v-if="tabIndex == 0">
			<u-empty
				v-if="list.length<1"
				marginTop="100"
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
			<view class="" v-for="(item,index) in list" :key="item.id">
				<u-swipe-action>
					<u-swipe-action-item
						:disabled="true"
						>
						<view v-if="item.type == '报销'" class="swipe-action u-border-top u-border-bottom" @click="navigateToDetail(item.id, index,'/subPackTask/work/cy/bx/detail?spType=审批&type=报销&id=')">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
										<view style="margin-left: 10rpx;">{{item.userName}}提交的报销</view>
										<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
											{{item.tjDate}}
										</view>
									</view>
								</view>
								<view class="text-sm text-grey margin-top-xs">报销金额(元)：{{item.amount}}</view>
								<view class="text-sm text-grey margin-top-xs">报销类型：{{item.type}}</view>
								<view class="text-sm text-grey margin-top-xs">报销明细：{{item.detailed}}</view>
							</view>
							<view class="status">
								<span v-if="item.show"><image src="https://www.zxsl.zxmap.cn/zxch-app/2024/05/23/a5a92cdcc70e4687b3aff058a521f0d3.png" mode="aspectFit" /></span>
							</view>
						</view>
						<view v-if="item.type == '请假'" class="swipe-action u-border-top u-border-bottom" @click="navigateToDetail(item.id, index,'/subPackTask/vacation/detail?spType=审批&type=请假&id=')">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
										<view style="margin-left: 10rpx;">{{item.userName}}提交的请假</view>
										<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
											{{item.createTime}}
										</view>
									</view>
								</view>
								<view class="text-sm text-grey margin-top-xs">请假类型：{{item.type}}</view>
								<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
								<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
							</view>
							<view class="status">
								<span v-if="item.show"><image src="https://www.zxsl.zxmap.cn/zxch-app/2024/05/23/a5a92cdcc70e4687b3aff058a521f0d3.png" mode="aspectFit" /></span>
							</view>
						</view>
						<view v-if="item.type == '任务管家任务'" class="swipe-action u-border-top u-border-bottom"
							@click="navigateToDetail(item.id, index,'/subPackTask/taskButler/totalTask/detail?spType=审批&type=任务管家任务&id=')">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.createBy.slice(1)"
											:fontSize="item.createBy.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
										<view style="margin-left: 10rpx;">{{item.createBy}}提交的管家任务</view>
										<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
											{{item.createTime}}
										</view>
									</view>
								</view>
								<view class="text-sm text-grey margin-top-xs">所属项目：{{item.projectName}}</view>
								<view class="text-sm text-grey margin-top-xs">任务名称：{{item.taskName}}</view>
								<view class="text-sm text-grey margin-top-xs">负责人：{{item.fzrName}}</view>
							</view>
							<view class="status">
								<span v-if="item.show"><image src="https://www.zxsl.zxmap.cn/zxch-app/2024/05/23/a5a92cdcc70e4687b3aff058a521f0d3.png" mode="aspectFit" /></span>
							</view>
						</view>
						<view v-if="item.type == '成果会签'" class="swipe-action u-border-top u-border-bottom"
							 @click="navigateToDetail(item.id, index,'/subPackTask/ountersign/detail?spType=审批&type=成果会签&id=')">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
										<view style="margin-left: 10rpx;">{{item.userName}}提交的成果会签</view>
										<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
											{{item.createTime}}
										</view>
									</view>
								</view>
								<view class="text-sm text-grey margin-top-xs">成果名称：{{item.fruitName}}</view>
								<view class="text-sm text-grey margin-top-xs">测量开始时间：{{item.beginTime}}</view>
								<view class="text-sm text-grey margin-top-xs">测量结束时间：{{item.endTime}}</view>
							</view>
							<view class="status">
								<span v-if="item.show"><image src="https://www.zxsl.zxmap.cn/zxch-app/2024/05/23/a5a92cdcc70e4687b3aff058a521f0d3.png" mode="aspectFit" /></span>
							</view>
						</view>
						<view v-if="item.type == '加班'" class="swipe-action u-border-top u-border-bottom" @click="navigateToDetail(item.id, index,'/subPackTask/vacation/detail?spType=审批&type=加班&id=')">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
										<view style="margin-left: 10rpx;">{{item.userName}}提交的加班</view>
										<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
											{{item.createTime}}
										</view>
									</view>
								</view>
								<view class="text-sm text-grey margin-top-xs">加班类型：{{item.type}}</view>
								<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
								<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
							</view>
							<view class="status">
								<span v-if="item.show"><image src="https://www.zxsl.zxmap.cn/zxch-app/2024/05/23/a5a92cdcc70e4687b3aff058a521f0d3.png" mode="aspectFit" /></span>
							</view>
						</view>
						<view v-if="item.type == '车辆管理'" class="swipe-action u-border-top u-border-bottom" @click="navigateToDetail(item.id, index,'/subPackTask/work/scgl/ycgl/detail?spType=审批&type=车辆管理&id=')">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
										<view style="margin-left: 10rpx;">{{item.userName}}提交的行车日志</view>
										<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
											{{item.createTime}}
										</view>
									</view>
								</view>
								<view class="text-sm text-grey margin-top-xs">车牌号：{{item.carNum}}</view>
								<view class="text-sm text-grey margin-top-xs">目的地：{{item.destination}}</view>
								<view class="text-sm text-grey margin-top-xs">使用时间：{{item.timeSlot}}</view>
							</view>
							<view class="status">
								<span v-if="item.show"><image src="https://www.zxsl.zxmap.cn/zxch-app/2024/05/23/a5a92cdcc70e4687b3aff058a521f0d3.png" mode="aspectFit" /></span>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			
		</view>
		
		<view v-if="tabIndex == 1">
			<u-empty
				v-if="list.length<1"
				marginTop="100"
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
			<u-swipe-action>
				<u-swipe-action-item
					:disabled="true"
					v-for="(item,index) in list" :key="item.id">
					<view v-if="item.type == '报销'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/cy/bx/detail?spType=已处理&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的报销</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.tjDate}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">报销金额(元)：{{item.amount}}</view>
							<view class="text-sm text-grey margin-top-xs">报销类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">报销明细：{{item.detailed}}</view>
						</view>
					</view>
					<view v-if="item.type == '请假'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/vacation/detail?spType=已处理&type=请假&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的请假</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">请假类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
						</view>
					</view>
					<view v-if="item.type == '任务管家任务'" class="swipe-action u-border-top u-border-bottom"
						@click="gotoPage('/subPackTask/taskButler/totalTask/detail?spType=审批&type=任务管家任务&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.createBy.slice(1)"
										:fontSize="item.createBy.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.createBy}}提交的管家任务</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">所属项目：{{item.projectName}}</view>
							<view class="text-sm text-grey margin-top-xs">任务名称：{{item.taskName}}</view>
							<view class="text-sm text-grey margin-top-xs">负责人：{{item.fzrName}}</view>
						</view>
					</view>
					<view v-if="item.type == '成果会签'" class="swipe-action u-border-top u-border-bottom"
						@click="gotoPage('/subPackTask/ountersign/detail?spType=审批&type=成果会签&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的成果会签</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">成果名称：{{item.fruitName}}</view>
							<view class="text-sm text-grey margin-top-xs">测量开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">测量结束时间：{{item.endTime}}</view>
						</view>
					</view>
					<view v-if="item.type == '加班'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/vacation/detail?spType=已处理&type=加班&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的加班</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">加班类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
						</view>
					</view>
					<view v-if="item.type == '车辆管理'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/scgl/ycgl/detail?spType=已处理&type=车辆管理&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的行车日志</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">车牌号：{{item.carNum}}</view>
							<view class="text-sm text-grey margin-top-xs">目的地：{{item.destination}}</view>
							<view class="text-sm text-grey margin-top-xs">使用时间：{{item.timeSlot}}</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
		<view v-if="tabIndex == 2">
			<u-empty
				v-if="csList.length<1"
				marginTop="100"
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
			<u-swipe-action>
				<u-swipe-action-item
					:disabled="true"
					v-for="(item,index) in csList" :key="item.id">
					<view v-if="item.type == '报销'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/cy/bx/detail?spType=抄送我&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的报销</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.tjDate}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">报销金额(元)：{{item.amount}}</view>
							<view class="text-sm text-grey margin-top-xs">报销类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">报销明细：{{item.detailed}}</view>
						</view>
					</view>
					<view v-if="item.type == '请假'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/vacation/detail?spType=抄送我&type=请假&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的请假</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">请假类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
						</view>
					</view>
					<view v-if="item.type == '任务管家任务'" class="swipe-action u-border-top u-border-bottom"
						@click="gotoPage('/subPackTask/taskButler/totalTask/detail?spType=抄送我&type=任务管家任务&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的管家任务</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">所属项目：{{item.projectName}}</view>
							<view class="text-sm text-grey margin-top-xs">任务名称：{{item.taskName}}</view>
							<view class="text-sm text-grey margin-top-xs">负责人：{{item.fzrName}}</view>
						</view>
					</view>
					<view v-if="item.type == '成果会签'" class="swipe-action u-border-top u-border-bottom"
						@click="gotoPage('/subPackTask/ountersign/detail?spType=抄送我&type=成果会签&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的成果会签</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">成果名称：{{item.fruitName}}</view>
							<view class="text-sm text-grey margin-top-xs">测量开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">测量结束时间：{{item.endTime}}</view>
						</view>
					</view>
					<view v-if="item.type == '加班'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/vacation/detail?spType=抄送我&type=加班&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的加班</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">加班类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
						</view>
					</view>
					<view v-if="item.type == '车辆管理'" class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/scgl/ycgl/detail?spType=抄送我&type=车辆管理&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view class="text-sm margin-top-xs" style="display: flex;font-size: 30rpx;">
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
									<view style="margin-left: 10rpx;">{{item.userName}}提交的行车日志</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 35rpx 50rpx 0 0;">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">车牌号：{{item.carNum}}</view>
							<view class="text-sm text-grey margin-top-xs">目的地：{{item.destination}}</view>
							<view class="text-sm text-grey margin-top-xs">使用时间：{{item.timeSlot}}</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	import { getList,getCsList } from '@/api/flow.js'
	export default {
		data() {
			return {
				searchValue:'',
				csList:[],
				pageNum:1,
				list:[],
				tabIndex:0,
				tabList:[
					{
						name: '待审批',
						badge: {
							value: 0
						}
					}, 
					{
						name: '已处理',
					}, 
					{
						name: '抄送我'
					}
				],
				processedId:[],
			}
		},
		onReachBottom(){
			this.pageNum += 1
			if(this.tabIndex==0){
				this.getListData('0')
			}else if(this.tabIndex==1){
				this.getListData('1,2')
			}else if(this.tabIndex==2){
				this.getCsListData()
			}
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.list = []
			this.csList = []
			if(this.tabIndex==0){
				this.getListData('0')
			}else if(this.tabIndex==1){
				this.getListData('1,2')
			}else if(this.tabIndex==2){
				this.getCsListData()
			}
			uni.stopPullDownRefresh()
		},
		onShow() {
			
		},
		onLoad() {
			this.inti()
		},
		methods: {
			navigateToDetail(id, index,toPage) {
				// 使用 uni.navigateTo 跳转到详情页，并传递数据
				uni.navigateTo({
					url: `${toPage}${id}`,
					events: {
						refreshPage: (data) => {
							this.updateItemStatus(data.id);
						}
					},
				});
			},
			updateItemStatus(id) {
				this.processedId.push(id)
				const index = this.list.findIndex(item => item.id === id);
				if (index !== -1) {
					// this.list.splice(index, 1);
					this.$set(this.list[index], 'show', true);  //使用 this.$set 来确保 Vue 的响应式机制能够检测到属性的变化
					this.tabList[0].badge.value -= 1;
					this.$forceUpdate(); //强制视图重新渲染
				}
			},
			inti(){
				if(this.tabIndex==0){
					this.pageNum = 1
					this.list = []
					this.getListData('0')
				}else if(this.tabIndex==1){
					this.pageNum = 1
					this.list = []
					this.getListData('1,2')
				}else if(this.tabIndex==2){
					this.pageNum = 1
					this.csList = []
					this.getCsListData()
				}
			},
			searchChange(e){
				this.searchValue = e
				if(this.tabIndex == 1){
					this.pageNum = 1
					this.list = []
					this.getListData('1,2')
				}else if(this.tabIndex == 2){
					this.pageNum = 1
					this.csList = []
					this.getCsListData()
				}
			},
			tabClick(item) {
				this.tabIndex = item.index
				this.searchValue = ''
				this.processedId = []
				if(item.index == 0){
					this.pageNum = 1
					this.list = []
					this.getListData('0')
				}else if(item.index == 1){
					this.pageNum = 1
					this.list = []
					this.getListData('1,2')
				}else if(item.index == 2){
					this.pageNum = 1
					this.csList = []
					this.getCsListData()
				}
			},
			async getListData(status){
				let params = {
					status:status,
					pageNum:this.pageNum,
					remark:this.searchValue,
				}
				if(status=="0" && this.processedId.length!=0){
					params = {
						status:status,
						pageNum:this.pageNum,
						remark:this.searchValue,
						tbIds:this.processedId.join()
					}
				}
				const { data } = await getList(params);
				if(data.code == 200){
					if(this.tabIndex==0){
						this.tabList[0].badge.value = data.total - this.processedId.length
					}
					if(data.rows.length > 0){
						this.list = [...this.list,...data.rows]
					}
				}
			},
			async getCsListData(){
				let params = {
					pageNum:this.pageNum,
					remark:this.searchValue,
				}
				const { data } = await getCsList(params);
				if(data.code == 200 && data.rows.length > 0){
					this.csList = [...this.csList,...data.rows]
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.add-button{
		line-height: 104rpx;
		color: #0081ff;
	}
	.status {
		position: absolute;
		top: 45%;
		right: 35rpx;
		width: 100rpx;
		height: 100rpx;
		transform: translateY(-50%);
	}
	.status image {
		width: 100%;
		height: 100%;
	}
</style>
